<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>管理员后台</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="icon" href="../img/admin.ico" type="img/x-ico" />
    <link href='http://fonts.useso.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../lib/font-awesome/css/font-awesome.css">

    <script src="../lib/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/Admin.js"></script>
    <link rel="stylesheet" href="../css/Admin.css">
    <link rel="stylesheet" type="text/css" href="../stylesheets/theme.css">
    <link rel="stylesheet" type="text/css" href="../stylesheets/premium.css">

</head>

<body class=" theme-blue">

    <script type="text/javascript">
        $(function () {
            var match = document.cookie.match(new RegExp('color=([^;]+)'));
            if (match) var color = match[1];
            if (color) {
                $('body').removeClass(function (index, css) {
                    return (css.match(/\btheme-\S+/g) || []).join(' ')
                })
                $('body').addClass('theme-' + color);
            }

            $('[data-popover="true"]').popover({ html: true });

        });
    </script>
    <style type="text/css">
        #line-chart {
            height: 300px;
            width: 800px;
            margin: 0px auto;
            margin-top: 1em;
        }

        .navbar-default .navbar-brand,
        .navbar-default .navbar-brand:hover {
            color: #fff;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            var uls = $('.sidebar-nav > ul > *').clone();
            uls.addClass('visible-xs');
            $('#main-menu').append(uls.clone());
        });
    </script>

    <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="" href="#"><span class="navbar-brand"><span class="fa fa-paper-plane"></a></div>
        <div class="navbar-collapse collapse" style="height: 1px;">
            <ul id="main-menu" class="nav navbar-nav navbar-right">
                <li class="dropdown hidden-xs">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-user padding-right-small"
                            style="position:relative;top: 3px;"></span> {{name}}
                        <i class="fa fa-caret-down"></i>
                    </a>

                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="AdminLogin.html">Sign out</a></li>
                        <li><a tabindex="-1" href="#">Logout</a></li>
                    </ul>
                </li>
            </ul>

        </div>
    </div>
    </div>
<div id="all-content">
    <div class="sidebar-nav">
        <ul>
            <li><a href="#" data-target=".dashboard-menu" class="nav-header" data-toggle="collapse"><i
                        class="fa fa-fw fa-dashboard"></i> 修改信息<i class="fa fa-collapse"></i></a></li>
            <li>
                <ul class="dashboard-menu nav nav-list collapse in">
                    <li><a href="#" @click = "modify-password"><span class="fa fa-caret-right"></span> 修改密码</a></li>
                    <li><a href="#" @click = "modify-phone"><span class="fa fa-caret-right"></span> 修改电话号码</a></li>
                    <li><a href="#" @click = "ModifyAccount"><span class="fa fa-caret-right"></span> 修改账号</a></li>
                    <li><a href="#" @click = "modify-admin"><span class="fa fa-caret-right"></span> 更换管理员</a></li>
                </ul>
            </li>

            <li><a href="#" data-target=".legal-menu" class="nav-header collapsed" data-toggle="collapse"><i
                        class="fa fa-fw fa-legal"></i> 功能<i class="fa fa-collapse"></i></a></li>
            <li>
                <ul class="legal-menu nav nav-list collapse">
                    <li><a href="#"><span class="fa fa-caret-right"></span> 查看实时使用情况</a></li>
                    <li><a href="#"><span class="fa fa-caret-right"></span> 查看统计数据</a></li>
                </ul>
            </li>
    </div>

    <div class="content">

        <div class="main-content">

            <div class="panel panel-default">
                <a href="#" class="panel-heading" data-toggle="collapse">实时使用情况</a>
                <div id="page-stats" class="panel-collapse panel-body collapse in">

                    <div v-html = "ContentHtml"></div>
                </div>
            </div>
        </div>
    </div>
</div>

    <script src="../lib/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript">
        $("[rel=tooltip]").tooltip();
        $(function () {
            $('.demo-cancel-click').click(function () { return false; });
        });
    </script>


</body>

</html>